<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "工商记账"
      },
      // 暂时需要登录，后续再改
      "needLogin": true
     }
 </route>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import bookkeeping_1 from '../static-assets/circle/bookkeeping_1.png'
import bookkeeping_2 from '../static-assets/circle/bookkeeping_2.png'
import bookkeeping_3 from '../static-assets/circle/bookkeeping_3.png'
import bookkeeping_4 from '../static-assets/circle/bookkeeping_4.png'
import cj_ser_four from '../static-assets/circle/cj_ser_four.png'
import cj_ser_one from '../static-assets/circle/cj_ser_one.png'
import cj_ser_three from '../static-assets/circle/cj_ser_three.png'
import cj_ser_two from '../static-assets/circle/cj_ser_two.png'
// 服务项目
const services = ref([
  {
    id: 1,
    title: '快速启动',
    description: '最快3个工作日即可完成注册流程',
    circleImg: cj_ser_one,
  },
  {
    id: 2,
    title: '专业保障',
    description: '专业顾问团队，确保每一步都合规',
    circleImg: cj_ser_two,
  },
  {
    id: 3,
    title: '无忧体验',
    description: '全程代办，覆盖公司注册全过程',
    circleImg: cj_ser_three,
  },
  {
    id: 4,
    title: '透明收费',
    description: '一次性标准报价，中途不恶意加价',
    circleImg: cj_ser_four,
  },
])

const accountingPractices = ref([
  {
    id: 1,
    title: '高效便捷',
    description: '节省时间和精力，专注于核心业务',
    bookkeepImg: bookkeeping_1,
    bg_color: 'linear-gradient(88.31deg, rgba(255, 218, 218, 0.6) 0.05%, rgba(255, 239, 239, 0.6) 99.95%)',
  },
  {
    id: 2,
    title: '专业可靠',
    description: '专业会计师团队，确保数据准确性',
    bookkeepImg: bookkeeping_2,
    bg_color: 'linear-gradient(88.31deg, rgba(255, 228, 215, 0.6) 0.05%, rgba(255, 244, 239, 0.6) 99.95%)',
  },
  {
    id: 3,
    title: '成本节约',
    description: '相比聘请全职会计人员，成本更低',
    bookkeepImg: bookkeeping_3,
    bg_color: 'linear-gradient(88.31deg, rgba(218, 240, 255, 0.6) 0.05%, rgba(235, 247, 255, 0.6) 99.95%)',
  },
  {
    id: 4,
    title: '合规保障',
    description: '遵循最新财税法规，规避财务风险',
    bookkeepImg: bookkeeping_4,
    bg_color: 'linear-gradient(88.31deg, rgba(217, 219, 255, 0.6) 0.05%, rgba(238, 239, 255, 0.6) 99.95%)',
  },
])

const model = reactive<{
  companyName: string
  phone: string
}>({
  companyName: '',
  phone: '',
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        uni.showToast({
          title: '校验通过',
          icon: 'success',
        })
        // toast.success('校验通过')
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<template>
  <view class="bg-#f5f5f5 pb-30rpx">
    <!-- 顶部banner -->
    <view class="h-350rpx overflow-hidden p-20rpx">
      <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="widthFix" :lazy-load="true" />
    </view>

    <!--  -->
    <view class="m-20rpx rounded-12rpx bg-white p-30rpx">
      <view class="mb-20rpx text-left text-32rpx font-bold">
        快速注册公司，一键省心创业
      </view>
      <wd-form ref="form" :model="model">
        <wd-cell-group>
          <view style="border-bottom: 1px solid #e5e5e5; margin-bottom: 20rpx;">
            <wd-input
              v-model="model.companyName"
              label="公司名称"
              label-width="31%"
              :maxlength="20"
              prop="companyName"
              clearable
              placeholder="请输入想注册的公司名称"
              :rules="[{ required: true, message: '请填写公司名称' }]"
            >
              <template #prefix>
                <image
                  src="/static/company.svg"
                  mode="scaleToFill"
                  class="h-40rpx w-40rpx"
                />
              </template>
            </wd-input>
          </view>
          <view style="border-bottom: 1px solid #e5e5e5;">
            <wd-input
              v-model="model.phone"
              label="手机号"
              label-width="31%"
              prop="phone"
              :maxlength="11"
              clearable
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
            >
              <template #prefix>
                <image
                  src="/static/phone.svg"
                  mode="scaleToFill"
                  class="h-40rpx w-40rpx"
                />
              </template>
            </wd-input>
          </view>
        </wd-cell-group>
        <view class="mt-40rpx">
          <wd-button type="primary" size="large" custom-class="red_button" block @click="handleSubmit">
            提交
          </wd-button>
        </view>
      </wd-form>
    </view>

    <!-- 工商注册 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            工商注册
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-2 gap-15rpx">
            <view
              v-for="service in services"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
            >
              <image
                :src="service.circleImg"
                mode="scaleToFill"
                class="absolute inset-0 h-full w-full" :lazy-load="true"
              />
              <view class="relative z-10 mt-10rpx">
                <view class="mb-10rpx text-28rpx font-bold">
                  {{ service.title }}
                </view>
                <view class="line-clamp-2 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 代理记账 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            代理记账
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-1 gap-15rpx">
            <view
              v-for="service in accountingPractices"
              :key="service.id"
              class="flex items-center justify-between overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
              :style="{ background: service.bg_color }"
            >
              <view>
                <view class="mb-10rpx text-28rpx font-bold">
                  {{ service.title }}
                </view>
                <view class="line-clamp-3 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
              <image
                :src="service.bookkeepImg"
                mode="scaleToFill"
                class="h-88rpx w-88rpx"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 合作机构 -->
    <view class="m-20rpx rounded-12rpx bg-white p-20rpx">
      <view class="mb-30rpx flex items-center pl-10rpx text-32rpx font-bold">
        合作机构
      </view>
      <scroll-view scroll-x class="whitespace-nowrap px-4" style="width: auto;">
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
      </scroll-view>
    </view>
  </view>
</template>
